<template>
    <div class="container">
        <el-card class="box-card" shadow="none" border="none">
            <div slot="header" class="clearfix">
                <span style="font-weight:bold">我的预约</span>
            </div>

            <div class="enterprise_detail_content">
                <!-- 内容区域 -->
                <div class="itinerary_overview_box" v-for="it in itinerary_overview" :key="it.key">
                    <div class="itinerary_overview">
                        <el-image class="image" fit="cover"
                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
                        <div class="detail">
                            <h2>{{ it.starting_point }}-{{ it.destination }}</h2>
                            <span class="name">{{ it.t_name }} | {{ it.start_time }}</span>
                        </div>
                        <div class="price">
                            ￥{{ it.price }}
                        </div>
                        <div class="btn">
                            <el-button type="success" size="mini"
                                @click="() => $router.push({ path: '/user/itinerary_detail', query: { itinerary_id: it.id, title: '行程单详情' } })">查看详情</el-button><br>

                            <el-button type="danger" size="mini" @click="cancel_visible = true">取消预约</el-button>
                        </div>
                    </div>

                    <div class="notice">
                        <h3><i class="el-icon-warning"></i> 旅前注意</h3>
                        <ol>
                            <li>{{ notice.first }}</li>
                            <li>{{ notice.second }}</li>
                        </ol>
                    </div>

                    <el-dialog title="注意" :visible.sync="cancel_visible" width="300px" style="z-index:20" append-to-body
                        center>
                        <span slot="title" style="color: #F56C6C;font-size:20px"><i class="el-icon-warning"></i> 警告</span>
                        确定要取消预约<br><span style="font-weight:bold;color:rgb(250,90,77)">{{ it.start_time }}</span>到<span
                            style="font-weight:bold;color:rgb(250,90,77)">{{
                                it.destination }}</span>的行程吗?
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="cancel_visible = false" size="medium">取 消</el-button>
                            <el-button type="primary" @click="cancel_book(it.id)" size="medium">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
                <el-empty v-if="this.itinerary_overview.length === 0" description="暂无数据"
                    style="position: absolute;left: 50%;transform: translate(-50%, 10%);"></el-empty>
                <el-divider v-if="this.itinerary_overview.length !== 0">没有啦，一滴都没有啦🥵</el-divider>
                <el-backtop target=".enterprise_detail_content">
                    <el-button type="primary" icon="el-icon-caret-top" circle></el-button></el-backtop>
            </div>

        </el-card>
    </div>
</template>

<script>

import Map from "@/components/reusable_components/map.vue";
import SvgIcon from '@/components/reusable_components/SvgIcon.vue';
export default {
    components: {
        Map,
        SvgIcon
    },

    data() {
        return {
            divider_visible: true,
            cancel_visible: false,
            book_item: null,
            itinerary_id: null,
            title: '',
            user: '',
            itinerary_overview: [],
            notice: { first: '出发前 24 小时不能退票。', second: '出发前请准备好旅行所需物品，如身份证等。' },
        }
    },

    mounted() {
        this.itinerary_id = this.$route.query.id // 取得id
        this.title = this.$route.query.title
        this.user = this.$route.query.user
        this.get_my_appointment()
    },

    methods: {
        // 返回上一页
        goBack() {
            this.$router.back()
        },

        async get_my_appointment() {
            try {
                const res = await this.$http.post("/itinerary/getmyreserve", {
                    id: sessionStorage.user_id,
                    pageNum: 1,
                    pageSize: 100
                })
                // 处理数据
                // console.log(res)
                this.itinerary_overview = res.data.data.information
            } catch (error) { }
        },

        async cancel_book(id) {
            try {
                const res = await this.$http.delete("/itinerary/detelereverse", {
                    data: {
                        i_id: id,
                        u_id: sessionStorage.user_id
                    }
                })//这里使用和更多页面一样的接口
                // 处理数据
                if (res.data.data == 1) {
                    this.$message.success('取消成功')
                    this.$router.go(0)
                    this.cancel_visible = false
                } else if (res.data.data == 0) {
                    this.$message.error('取消失败')
                } else {
                    this.$message.error('取消失败')
                }

                // console.log(res)
            } catch (error) {
                // console.log(error);
            }
        },
    }
}
</script>

<style lang="less" scoped>
.container {
    width: 61.8vw;
    min-width: 950px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);

    .enterprise_detail_content {
        height: 80vh;
        overflow: auto;


        display: flex;

        flex-wrap: wrap;

        -ms-overflow-style: none;
        // /* IE 10+ */

        scrollbar-width: none;
        /* Firefox */

        .itinerary_overview_box {
            width: 99.8%;
            height: 200px;
            border: 1px solid rgb(220, 223, 230);
            border-radius: 4px;
            margin-bottom: 10px;

            .itinerary_overview {
                width: 100%;
                height: 100px;
                display: flex;

                .image {
                    width: 150px;
                    height: 100%;
                }

                .detail {
                    width: 55%;
                    border-right: 5px dashed rgb(220, 223, 230);

                    h2 {
                        margin: 10px 0 10px 20px;
                        font-weight: 500;
                    }

                    .name {
                        color: #99a9bf;
                        font-size: 0.5em;
                        margin: 10px 0 10px 20px;
                    }
                }

                .price {
                    line-height: 100px;
                    text-align: center;
                    width: 15%;
                    height: 100%;
                    font-size: 30px;
                    color: rgb(250, 90, 77);
                    // border-right: 2px dashed rgb(220, 223, 230);
                }

                .btn {
                    margin: 0;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                }
            }
        }

        .notice {
            width: 100%;
            height: 100px;
            border-top: 1px solid rgb(220, 223, 230);

            h3 {
                margin: 10px 10px 0 20px;
                color: #E6A23C;
            }

            ol {
                margin: 15px 0 0 0;
                font-size: 12px;

                li {
                    margin-top: 5px;
                }
            }
        }


        .itinerary_overview_box:hover {
            // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.19);
            background-color: rgba(153, 169, 191, .15);
            cursor: pointer;
            transition: all 1s ease;
        }
    }

    .enterprise_detail_content::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    .more {
        margin-top: 1vh;
    }

}
</style>